<template>
    <div>
        <li
            class="todo"
            :class="{ completed: todo.done, editing: editing }"
        >
        <div class="view">
            <input
            class="toggle"
            type="checkbox"
            :checked='todo.done'
            @change="toggletodo(todo)"
            >
            <label
                v-text="todo.text"
                @dblclick="editing = true"
            ></label>
            <button
            class="destroy"
            @click="removeTodo(todo)"
            ></button>
        </div>
        <input
        v-show="editing"
            class="edit"
             v-focus="editing"
            :value="todo.text"
            @keyup.enter="doneEdit"
            @keyup.esc="cancelEdit"
            @blur="doneEdit"
        >
        </li>
    </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  props: ["todo"],
  data() {
    return {
      editing: false
    };
  },
  methods: {
    ...mapActions(["removeTodo", "toggletodo",'editTodo']),
    doneEdit(e) {
      let value = e.target.value.trim();
      let { todo } = this;
      console.log(todo);
      if (!value) {
        this.removeTodo(todo);
      } else if (this.editing) {
        this.editTodo({
          todo,
          value
        });
        this.editing = false;
      }
    },
    cancelEdit(e) {
      e.target.value = this.todo.text;
      this.editing = false;
    }
  },
  directives: {
    focus(el, { value }, { context }) {
      console.log(value)
      console.log(context)
      if (value) {
        
        context.$nextTick(() => {
          el.focus();
        });
      }
    },
  },
};
</script>

<style scoped>
</style>